<template>
	<view>
	<view class="paper2" v-if="effect == 'jsAnimate'">
		<view class="list-pape">
			<image src="" style="background-color: #aaa;"></image>
		</view>
		<!--  -->
		<view v-for="(item,index) in papers" v-show="!(pagenum > papers.length - index - 1)" :key="index" class="list-pape"
			:style="index == papers.length - pagenum - 1 ? clipPath1 : ''" @touchstart="touchstart"
			@touchmove="touchmove" @touchend="touchend">
			<image :src="item"></image>
		</view>
		<!--  -->
		<view class="page-back" v-show="transformCss" :style="transformCss + ';' + clipPath2 + ';' + transformOrigin">
			<image :src="pageBackImage" style="background-color: white;"></image>
		</view>
	</view>
	
	<view class="paper1" v-if="effect == 'cssAnimate'">
	    <view class="list-pape">
	      <image src="" style="background-color: #aaa;"></image>
	    </view>
	    <view
	      v-for="(item,index) in papers" 
		  class="list-pape"
	      :class="pagenum >= (papers.length - index) ? 'flipping-to-left':'flipping-to-right'" 
	      :style="{zIndex: pagenum >= (papers.length - index) ? (papers.length - index) : 0}">
	      <image :src="item"></image>
	    </view>
	</view>
	</view>
</template>

<script>
	export default {
		name: "flippingPage",
		emit: ['pageChange'],
		props:{
			papers:{
				type: Array,
				default(){
					return [
						'../../static/xiaogang-flippingPage/paper1.jpg',
						'../../static/xiaogang-flippingPage/paper2.jpg',
						'../../static/xiaogang-flippingPage/paper3.jpg',
					]
				}
			},
			effect: {
				type: String,
				default: 'cssAnimate',   // cssAnimate jsAnimate 
			}
		},
		data() {
			return {
				pagenum: 0,
				pageBackImage: '',
				transformCss: '',
				transformOrigin: '',
				clipPath1: '',
				clipPath2: '',
				_timer: null,
			};
		},
		methods: {
			touchstart(e) {

			},
			touchmove(e) {
				let clientX = e.touches[0].clientX;
				let clientY = e.touches[0].clientY;
				this.flippingPage(clientX, clientY);
			},
			touchend() {
				this.transformCss = '';
				this.transformOrigin = ''
				this.clipPath2 = 'clip-path: polygon(100% 100%, 100% 100%, 100% 100%)'
				this.clipPath1 = ''
			},

			flippingPage(clientX, clientY) {
				let x = 287 - clientX;
				let y = 450 - clientY;

				let a = ((x / 2 * x / 2) + (y / 2 * y / 2)) / (x / 2);
				let b = ((x / 2 * x / 2) + (y / 2 * y / 2)) / (y / 2);
				a = a > 287 ? 287 : a;

				let angle = (Math.atan(a / b) * (180 / Math.PI));
				angle = 180 - angle * 2;

				this.pageBackImage = this.papers[this.papers.length - this.pagenum - 1];
				this.transformCss = 'transform: rotateX(180deg) rotateZ(' + angle + 'deg)';
				this.transformOrigin = 'transform-origin: right ' + (450 - b) + 'px';
				this.clipPath2 = 'clip-path: polygon(100% 100%, ' + (287 - a) + 'px 100%, 100% ' + (450 - b) + 'px)';
				this.clipPath1 = 'clip-path: polygon(0% 0%, 0% 100%, ' + (287 - a) + 'px 100%, 100% ' + (450 - b) + 'px, 100% 0%)';
			},
			animate1(callback) {
				let clientX = 287;
				let clientY = 450;
				let timer = setInterval(() => {
					clientX -= 30;
					clientY -= 1;
					if (clientX < -287) {
						clientX = -287;
						clientY = 449;
						this.flippingPage(clientX, clientY)
						clearInterval(timer);
						this.transformCss = '';
						this.transformOrigin = '';
						this.clipPath2 = 'clip-path: polygon(100% 100%, 100% 100%, 100% 100%)';
						this.clipPath1 = '';
						callback && callback();
					}
					this.flippingPage(clientX, clientY)
				}, 20);
			},
			animate2(callback) {
				let clientX = -287;
				let clientY = 450;
				let timer = setInterval(() => {
					clientX += 30;
					clientY -= 1;
					if (clientX > 287) {
						clientX = 287;
						clientY = 449;
						this.flippingPage(clientX, clientY)
						clearInterval(timer);
						this.transformCss = '';
						this.transformOrigin = '';
						this.clipPath2 = 'clip-path: polygon(100% 100%, 100% 100%, 100% 100%)';
						this.clipPath1 = '';
						callback && callback();
					}
					this.flippingPage(clientX, clientY)
				}, 20);
			},
			next() {
				if (this.pagenum > this.papers.length - 1) return;
				if(this.effect == 'cssAnimate'){
					this.pagenum++;
					this.$emit('pageChange', this.pagenum)
				}else{
					this.animate1(() => {
						this._timer = setTimeout(()=>{
							clearTimeout(this._timer)
							this.pagenum++;
							this.clipPath1 = '';
							this.$emit('pageChange', this.pagenum)
						},0)
					})
				}
			},
			prev() {
				if (this.pagenum <= 0) return;
				if(this.effect == 'cssAnimate'){
					this.pagenum--;
					this.$emit('pageChange', this.pagenum)
				}else{
					this.pagenum--;
					this.$emit('pageChange', this.pagenum)
					this.animate2(() => {})
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.paper1 {
	  transform-style: preserve-3d;
	  position: relative;
	  height: 100vh;
	  width: 100vw;
	  .list-pape{
	    overflow: hidden;
	    width: 287px;
	    height: 450px;
	    position: absolute;
	    left: 5%;
	    top: 5%;
	    
	    transform-origin: left center;
	    box-shadow: 3px 0px 8px 0px #0000004d;
		image{
		  width: 100%;
		  height: 100%;
		}
	  }
	  .list-pape.flipping-to-left{
	    animation: flip-to-left 2s ease-in-out forwards;
	  }
	  .list-pape.flipping-to-right{
	    animation: flip-to-right 1s ease-in-out forwards;
	  }
	  
	  @keyframes flip-to-left {
	    from {
	        transform: perspective(1000px) rotateY(0);
	    }
	    to {
	        transform: perspective(1000px) rotateY(-180deg);
	    }
	  }
	  @keyframes flip-to-right {
	    from {
	        transform: perspective(1000px) rotateY(-180deg);
	    }
	    to {
	        transform: perspective(1000px) rotateY(0);
	    }
	  }
	}
	
	
	.paper2 {
		transform-style: preserve-3d;
		position: relative;
		height: 100vh;
		width: 100vw;
		overflow: hidden;
		.list-pape,
		.page-back {
			overflow: hidden;
			width: 287px;
			height: 450px;
			position: absolute;
			left: 0%;
			top: 0%;
			box-shadow: 3px 0px 8px 0px #0000004d;
		}
		
		.list-pape image,
		.page-back image {
			width: 100%;
			height: 100%;
		}
		
		.page-back {
			transform-origin: right bottom;
			pointer-events: none;
			filter: contrast(0.4);
		}
	}
	
</style>